<template>
	<view style="min-height: 100vh;background-color: #fff;">
		<dev-navbar :title="title"></dev-navbar>
		<!-- 评估卡片 -->
		<view class="evaluation-card-box">
			<view class="every-evaluation-card" :style="{'background-image':`url(${item.healthPlanTheme})`}"
				  v-for="(item,index) in list" :key="index">
				<view class="evaluationStatus"
					  :style="{'background':item.taskStatus==0||item.taskStatus==4?'#84C756':item.taskStatus==1?'#37ADE0':item.taskStatus==2?'#A8A6A4':'#D9A43E'}">
					{{item.taskStatus==0||item.taskStatus==4?'已评估':item.taskStatus==1?'进行中':item.taskStatus==2?'已结束':'未评估'}}
				</view>
				<view class="card-information">
					<view class="evaluation-title">
						<text>
							{{item.healthPlanName}}
						</text>
					</view>
					<view class="appraisal-value text-line">
						{{item.healthPlanDesc}}
					</view>
					<view class="evaluation-button" :style="{'background':item.buttonColor}" @click="challenge(item)">
						参与挑战
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '健康计划', //任务状态0：已评估 1：进行中 2：已结束 3：未评估
				list: [],
				// list: [{
				// 		assessmentStatus: 0, //0未评估； 1已评估
				// 		topicName: '“2+1”健康风险评估',
				// 		topicDesc: '全面了解自己的健康状态',
				// 		buttonColor: '#0B8AD0',
				// 		coverPicUrl: 'http://static.bsyjk.cn/shoppingMall/1E53138B5C5F4CCBB135C2C97AC6A7FE.png',
				// 	},
				// 	{
				// 		assessmentStatus: 1, //0未评估； 1已评估
				// 		topicName: '非医疗高血压管理专项评估',
				// 		topicDesc: '全面了解自己的健康状态',
				// 		buttonColor: '#3CC6DD',
				// 		coverPicUrl: 'http://static.bsyjk.cn/shoppingMall/C5BCD601561B448B922857A8C40EAC1E.png'
				// 	}
				// ],
			};
		},
		// onLoad() {
		// 	this.healthPlanList();
		// },
		onShow() {
			this.healthPlanList();
		},
		methods: {
			challenge(item) {
				//未评估跳转到评估页面
				if (item.taskStatus == 3 && item.thematicPlan != 1) {
					this.$urouter.navigateTo({
						url: '/pagesHome/start-assessment/start-assessment',
						params: {
							topicId: item.topicId,
						}
					});
					return;
				}
				//未评估的2+1跳转到2+1评估页面
				if ((item.taskStatus == 3) && item.thematicPlan == 1) {
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/oneAccess/evaluating',
						params: {
							// topicId: item.topicId,
						}
					});
					return;
				}
				//2+1 不是未评估的 跳转页面
				// if (item.taskStatus != 3 && item.thematicPlan == 1) {
				// 	this.$urouter.navigateTo({
				// 		url: '/pagesHome/health-assessment/health-task',
				// 		params: {
				// 			userTaskId: item.userTaskId,
				// 		}
				// 	});
				// 	return;
				// }
				this.$api.get(global.apiUrls.joinPlanStatus, {
					userTaskId: item.userTaskId || 0,
					thematicPlan: item.thematicPlan,
					step: 1,
				}).then(res => {
					let _this = this;
					if (res.data.code == 1000) {
						_this.$urouter.navigateTo({
							url: '/pagesHome/health-assessment/health-task',
							params: {
								userTaskId: item.userTaskId,
							}
						});
					} else if (res.data.code == 5705) {
						// this.$message.info(res.data.message)
						uni.showModal({
							title: '提示',
							content: res.data.message,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: '',
							cancelText: "否", // 取消按钮的文字
							confirmText: "是", // 确认按钮的文字
							content: res.data.message,
							success: function(res) {
								if (res.confirm) {
									if (item.thematicPlan != 1) {
										//跳转到加入计划页面
										_this.$urouter.navigateTo({
											url: '/pagesHome/health-assessment/administration-plan',
											params: {
												userTaskId: item.userTaskId ||0,
												healthPlanName: item.healthPlanName,
												thematicPlan: item.thematicPlan,
											}
										});
									} else {
										//用户加入计划
										_this.userJoinplan(item);
									}
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			userJoinplan(item) {
				console.info("参加任务");
				uni.showLoading({
					title: '任务生成中'
				})
				this.$api.post(global.apiUrls.joinPlan, {
					userTaskId: item.userTaskId || 0,
					thematicPlan: item.thematicPlan,
				}).then(res => {
					uni.hideLoading();
					let _this = this
					uni.showModal({
						title: '提示',
						content: res.data.result,
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log(11111111111111111)
								_this.$urouter.navigateTo({
									url: '/pagesHome/health-assessment/health-task',
									params: {
										userTaskId: item.userTaskId,
									}
								});
							} else if (res.cancel) {
								console.log(222222222222)
								console.log('用户点击取消');
							}
						}
					});
				})

			},
			healthPlanList() {
				this.$api.get(global.apiUrls.healthPlanList, {}).then(res => {
					if (res.data.result) {
						this.list = res.data.result;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.evaluation-card-box {
		padding: 32rpx 34rpx;

		.every-evaluation-card {
			width: 682rpx;
			height: 268rpx;
			margin-bottom: 34rpx;
			background-size: 100% 100%;
			border-radius: 20rpx;

			.evaluationStatus {
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 16rpx 8rpx 8rpx 0rpx;
			}

			.card-information {
				margin-top: 20rpx;
				padding: 0rpx 42rpx;

				.evaluation-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.appraisal-value {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.evaluation-button {
					margin-top: 20rpx;
					width: 170rpx;
					height: 64rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-decoration: underline;
				}
			}
		}
	}
</style>
